<template>
    <div>
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>关联视频</h1>
            </div>
            <div class="col-xs-1">
                <a title="添加"  @click="dialogVideo('')">
                    <el-tooltip content="添加" placement="top">
                        <i class="el-icon-plus"></i>
                    </el-tooltip>
                </a>
            </div>
        </div>
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="videoTable" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="Title" label="标题" width="300px"></el-table-column>
                <el-table-column prop="VideoLength" label="时长" width="90px"> </el-table-column>
                <el-table-column prop="SortNo" label="顺序" width="70px"> </el-table-column>
                <el-table-column prop="VideoPath" label="视频地址" > </el-table-column>
                <el-table-column label="操作" align="center" min-width="40" width="150px">
                    <template slot-scope="scope">
                        <el-tooltip content="删除" placement="top">
                            <i class="fa fa-trash el-text-danger" @click="delVideo(scope.row.Id)"></i>
                        </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;   
                        <el-tooltip content="编辑" placement="top">
                            <i class="fa fa-edit el-text-blue" @click="dialogVideo(scope.row)"></i>
                        </el-tooltip>         
                    </template>
                </el-table-column>
            </el-table>    
        </el-col>
        <el-col :sapn="24" style="text-align:right" v-if="countVideo>0">
            <el-pagination @size-change="pageSizeChangeVideo" @current-change="pageCurrentChangeVideo" :current-page="currentPageVideo"
                :page-sizes="[10]" :page-size="pageSizeVideo" layout="total, sizes, prev, pager, next, jumper" :total="countVideo">
            </el-pagination>
        </el-col>
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>关联考试</h1>
            </div>
            <div class="col-xs-1">
                <a title="添加"  @click="dialogTest('')">
                    <el-tooltip content="添加" placement="top">
                        <i class="el-icon-plus"></i>
                    </el-tooltip>
                </a>
            </div>
        </div>
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="testTable" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="Question" label="问题"></el-table-column>
                <el-table-column prop="Type" label="类型"  width="100px"> </el-table-column>
                <el-table-column prop="Answer" label="答案" width="200px"> </el-table-column>
                <el-table-column prop="AnswerNum" label="选项个数" width="100px"> </el-table-column>
                <el-table-column prop="SortNo" label="顺序" width="90px"> </el-table-column>
                <el-table-column label="操作" align="center" min-width="40" width="150px">
                    <template slot-scope="scope">
                        <el-tooltip content="删除" placement="top">
                            <i class="fa fa-trash el-text-danger" @click="delTest(scope.row.Id)"></i>
                        </el-tooltip>&nbsp;&nbsp;&nbsp;&nbsp;   
                        <el-tooltip content="编辑" placement="top">
                            <i class="fa fa-edit el-text-blue" @click="dialogTest(scope.row)"></i>
                        </el-tooltip>         
                    </template>
                </el-table-column>
            </el-table>    
        </el-col>
        <el-col :sapn="24" style="text-align:right" v-if="countTest>0">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPageTest"
                :page-sizes="[10]" :page-size="pageSizeTest" layout="total, sizes, prev, pager, next, jumper" :total="countTest">
            </el-pagination>
        </el-col>
        <!-- 关联视频 -->
        <el-dialog title="关联视频" :visible.sync="dialogFormVisibleVideo">
            <el-form :model="formVideo" ref="formVideo" :rules="rulesVideo">
                <el-form-item class="hr" :label-width="formLabelWidth"></el-form-item>
                <el-form-item label="标题：" prop="Title" :label-width="formLabelWidth">
                    <el-input v-model="formVideo.Title" placeholder="请输入标题" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="时长：" prop="VideoLength" :label-width="formLabelWidth">
                    <el-input v-model="formVideo.VideoLength" placeholder="请输入时长" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="顺序：" prop="SortNo" :label-width="formLabelWidth">
                    <el-input v-model.number="formVideo.SortNo" type="number" placeholder="输入数字，数字越小越展示优先" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="视频地址：" prop="VideoPath" :label-width="formLabelWidth">
                    <el-input v-model="formVideo.VideoPath" placeholder="请输入视频地址" style="width:60%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveVideo" size="medium">确 定</el-button>
                <el-button @click="dialogFormVisibleVideo = false" size="medium">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 关联考试 -->
        <el-dialog title="关联视频" :visible.sync="dialogFormVisibleTest">
            <el-form :model="formTest" ref="formTest" :rules="rulesTest">
                <el-form-item class="hr" :label-width="formLabelWidth"></el-form-item>
                <el-form-item label="问题：" prop="Question" :label-width="formLabelWidth">
                    <el-input v-model="formTest.Question" type="textarea" placeholder="请输入问题" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="类型：" prop="QuestionType" :label-width="formLabelWidth">
                    <el-select v-model="formTest.QuestionType" placeholder="请选择类型" clearable style="width:60%;">
                        <el-option label="单选" value="1"></el-option>
                        <el-option label="多选" value="2"></el-option>
                        <el-option label="判断" value="3"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="答案：" prop="Answer" :label-width="formLabelWidth">
                    <el-input v-model="formTest.Answer" placeholder="请输入答案" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="选项个数：" prop="AnswerNum" :label-width="formLabelWidth">
                    <el-input v-model.number="formTest.AnswerNum" type="number" placeholder="请输入选项个数" style="width:60%;"></el-input>
                </el-form-item>
                <el-form-item label="顺序：" prop="SortNo" :label-width="formLabelWidth">
                    <el-input v-model.number="formTest.SortNo" type="number" placeholder="输入数字，数字越小越展示优先" style="width:60%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTest" size="medium">确 定</el-button>
                <el-button @click="dialogFormVisibleTest = false" size="medium">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                type:1,//状态为：多视频
                headerbg:'headerbg',//表格头部背景色
                getVideoListUrl:this.urlConfig+'/api/VideoManage/GetSubVideoListByVideoId',//关联视频
                addVideoUrl:this.urlConfig+'/api/VideoManage/VideoSubAdd',//add关联视频
                editVideoUrl:this.urlConfig+'/api/VideoManage/VideoSubUpdate',//edit关联视频
                delVideoUrl:this.urlConfig+'/api/VideoManage/PostDeleteSubVideoById',//del关联视频
                videoTable:[],//关联视频
                currentPageVideo:1,
                pageSizeVideo:10,
                countVideo:0,
                getTestListUrl:this.urlConfig+'/api/VideoManage/GetPapersList',//关联考试
                addTestUrl:this.urlConfig+'/api/VideoManage/PostPapers',//add关联考试
                editTestUrl:this.urlConfig+'/api/VideoManage/PostEditPapers',//edit关联考试
                delTestUrl:this.urlConfig+'/api/VideoManage/PostDeletePapers',//del关联考试
                testTable:[],//关联考试
                currentPageTest:1,
                pageSizeTest:10,
                countTest:0,

                dialogFormVisibleVideo: false,
                dialogFormVisibleTest: false,
                formLabelWidth: '25%',
                saveTypeVideo:'',
                saveTypeTest:'',
                formVideo: {},
                formTest: {},
                rulesVideo:{
                    Title:[
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],
                    VideoLength:[
                        { required: true, message: '请输入时长', trigger: 'blur' },
                    ],
                    SortNo:[
                        { required: true, message: '请输入展示顺序'},
                        { type: 'number', message: '顺序必须为小于51的正整数', min:0 ,max:50}
                    ],
                    VideoPath:[
                        { required: true, message: '请输入视频地址', trigger: 'blur' },
                    ]
                },
                rulesTest:{
                    Question:[
                        { required: true, message: '请输入问题', trigger: 'blur' },
                    ],
                    QuestionType:[
                        { required: true, message: '请选择类型', trigger: 'change' },
                    ],
                    Answer:[
                        { required: true, message: '请输入答案', trigger: 'blur' },
                    ],
                    AnswerNum:[
                        { required: true, message: '请输入选项个数'},
                        { type: 'number', message: '顺序必须为小于51的正整数', min:0 ,max:50}
                    ],
                    SortNo:[
                        { required: true, message: '请输入顺序'},
                        { type: 'number', message: '顺序必须为小于51的正整数', min:0 ,max:50}
                    ],
                },
            }
        },
        props:{
            videoid:''
        },
        components: {
        },
        mounted() {
            this.getVideoList(10,this.currentPageVideo);
            this.getTestList(10,this.currentPageTest);
        },
        methods:{
            getVideoList(PageSize,PageIndex){//关联视频
                this.$http.get(this.getVideoListUrl+'?VideoId='+this.videoid,{
                    emulateJSON:true
                }).then(function(res){
                    this.countVideo = 0;
                    this.videoTable = [];
                    if(res.body["Code"] == "200") {
                        this.countVideo = res.body.Count;
                        this.videoTable = JSON.parse(res.body.Data);
                    }
                });
            },
            getTestList:function(PageSize,PageIndex){//关联考试
                this.$http.get(this.getTestListUrl+'?PageSize='+PageSize+'&PageNo='+PageIndex+'&VideoId='+this.videoid,{
                    emulateJSON:true
                }).then(function(res){
                    this.countTest = 0;
                    this.testTable = [];
                    if(res.body["Code"] == "200") {
                        this.countTest = res.body.Count;
                        this.testTable = JSON.parse(res.body.Data);
                    }
                });
            },
            delVideo(id){//关联视频
                this.$confirm('确定需要删除该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(this.delVideoUrl+'?Id='+id,{
                        emulateJSON:true
                    }).then(function(res){
                        if(res.body["Code"] == "200") {
                            this.getVideoList(10,this.currentPageVideo);
                            this.$notify({title: '成功',message: '删除成功！',type: 'success'});
                        }else{
                            this.$notify({title: '警告',message: res.body["Message"],type: 'warning',duration:1200});
                        }
                    });
                }).catch(() => {});
            },
            dialogVideo(row){//关联视频 弹窗
                this.dialogFormVisibleVideo = true;
                this.saveTypeVideo = 'add';
                this.formVideo = {};
                if(row){
                    this.saveTypeVideo = 'edit';
                    this.formVideo.Id= row.Id;
                    this.formVideo.Title= row.Title;
                    this.formVideo.VideoLength= row.VideoLength;
                    this.formVideo.SortNo= row.SortNo;
                    this.formVideo.VideoPath= row.VideoPath;
                }
            },
            validateFun:function(key){
                var errorInfo='';
                var validateArr = [['Title','VideoLength','SortNo','VideoPath'],['Question','QuestionType','Answer','AnswerNum','SortNo']][key];
                var formTitle = ['formVideo','formTest'][key];
                for(var i=0;i<validateArr.length;i++){
                    this.$refs[formTitle].validateField((validateArr[i]),(re)=>{
                        errorInfo+=re+(re==''?'':', ');
                    })
                }
                return errorInfo;
            },
            saveVideo:function(){//关联视频 save
                var saveUrl = this.addVideoUrl;
                if(this.saveTypeVideo == 'edit'){
                    saveUrl = this.editVideoUrl;
                }
                var errorInfo=this.validateFun(0);
                if(!errorInfo){
                    this.formVideo.VideoId = this.videoid;
                    this.$http.post(saveUrl,this.formVideo,{
                        emulateJSON: true
                    }).then(function(res) {
                        if(res.body["Code"] == "200") {
                            this.dialogFormVisibleVideo = false;
                            this.getVideoList(10,this.currentPageVideo);
                        }else{
                            this.$notify.error({title: '错误',message:res.body["Message"]});
                        }
                    });
                }else{
                    this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                    return false;
                }
            },
            saveTest:function(){//关联考试 save
                var saveUrl = this.addTestUrl;
                if(this.saveTypeTest == 'edit'){
                    saveUrl = this.editTestUrl;
                }
                var errorInfo=this.validateFun(1);
                if(!errorInfo){
                    this.formTest.VideoId = this.videoid;
                    this.$http.post(saveUrl,this.formTest,{
                        emulateJSON: true
                    }).then(function(res) {
                        if(res.body["Code"] == "200") {
                            this.dialogFormVisibleTest = false;
                            this.getTestList(10,this.currentPageTest);
                        }else{
                            this.$notify.error({title: '错误',message:res.body["Message"]});
                        }
                    });
                }else{
                    this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                    return false;
                }
            },
            delTest:function(id){//关联考试
                this.$confirm('确定需要删除该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(this.delTestUrl+'?Id='+id+'&VideoId='+this.videoid,{
                        emulateJSON:true
                    }).then(function(res){
                        if(res.body["Code"] == "200") {
                            this.getTestList(10,this.currentPageTest);
                            this.$notify({title: '成功',message: '删除成功！',type: 'success'});
                        }else{
                            this.$notify({title: '警告',message: res.body["Message"],type: 'warning',duration:1200});
                        }
                    });
                }).catch(() => {});
            },
            dialogTest:function(row){//关联考试 弹窗
                this.dialogFormVisibleTest = true;
                this.saveTypeTest = 'add';
                this.formTest = {};
                if(row){
                    this.saveTypeTest = 'edit';
                    this.formTest.Id= row.Id;
                    this.formTest.Question= row.Question;
                    if(row.Type=='单选'){
                        this.formTest.QuestionType ='1';
                    }else if(row.Type=='多选'){
                        this.formTest.QuestionType ='2';
                    }else if(row.Type=='判断'){
                        this.formTest.QuestionType ='3';
                    }
                    this.formTest.Answer= row.Answer;
                    this.formTest.AnswerNum= row.AnswerNum;
                    this.formTest.SortNo= row.SortNo;
                }
            },
            pageSizeChangeVideo:function(val){//关联视频
                this.pageSizeVideo = val;
                this.getVideoList(val,this.currentPageVideo);
            },
            pageCurrentChangeVideo:function(val){//关联视频
                this.currentPageVideo = val;
                this.getVideoList(this.pageSizeVideo,val);
            },
            pageSizeChange:function(val){//关联考试
                this.pageSizeTest = val;
                this.getTestList(val,this.currentPageTest);
            },
            pageCurrentChange:function(val){//关联考试
                this.currentPageTest = val;
                this.getTestList(this.pageSizeTest,val);
            },
        }
    }
</script>
<style>
    .headerbg{
        background-color: #f4f3f3 !important;
    }
</style>
